<script setup lang="ts">
import { queryRuleByPlanCode } from "@/api/equip/recording";
import { getTableData } from "@/api/system/positionManage";
import { onMounted, reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
const cascaderProps = {
  children: "children",
  label: "name",
  value: "id",
  checkStrictly: true
};
const router = useRouter();
// 页面本身的值
const state = reactive<any>({
  queryParams: {
    inspectArea: "",
    date: "",
    pageNum: 1,
    pageSize: 20
  },
  // total: 0,
  tableColumns: [{ prop: "inspectAreaDesc", label: "巡检区域", minWidth: "200", showOverflowTooltip: true }],
  tableData: [],
  tableForm: null,
  positionCodesList: [],
  cascaderRef: null
});
const { tableForm, positionCodesList, tableData, tableColumns, queryParams, cascaderRef, total } = toRefs(state);
const props = defineProps<{ query: any }>();
// 查询表格数据
const queryTable = async () => {
  const { planCode } = props.query;
  const params = { ...queryParams.value, planCode };
  const data: any = await queryRuleByPlanCode(params);
  tableData.value = data;
  // total.value = data?.total;
};
// 重置表格
const resetTable = async () => {
  tableForm?.value.resetFields();
  queryTable();
};
// 获取巡检区域
const focusPositionCodes = async () => {
  const data = await getTableData({});
  positionCodesList.value = data || [];
};
// 巡检区域改变
const changeCheckArea = val => {
  queryParams.value.inspectArea = val && val.length > 0 ? val[val.length - 1] : "";
  cascaderRef.value.togglePopperVisible(false);
};
// 进入页面时触发
onMounted(() => {
  focusPositionCodes();
  queryTable();
});
// 巡检详情
const page = defineModel("page");
const detailQuery = defineModel("detailQuery");
function handleView(row) {
  // 记录当前详情页所需参数
  detailQuery.value = { lockTime: queryParams.value.lockTime, inspectArea: row.inspectArea, ruleCode: row.ruleCode };
  // 显示详情页
  page.value = "detail";
}
// 返回计划列表
const backDetailPage = () => {
  page.value = "home";
};
</script>
<template>
  <div>
    <div class="equip-wrap-common equip-inspect-rule-list-page">
      <div class="pt-[24px]">
        <px-button type="primary" icon="ArrowLeft" @click="backDetailPage">返回</px-button>
      </div>
      <!-- 搜索功能 -->
      <px-form
        ref="tableForm"
        class="custom-form-ui equip-form"
        style="padding-top: 14px"
        :model="queryParams"
        label-position="right"
        label-width="120px"
      >
        <px-row :gutter="16">
          <px-col :span="5">
            <px-form-item prop="inspectArea" label="巡检区域">
              <px-cascader
                ref="cascaderRef"
                v-model="queryParams.inspectArea"
                filterable
                clearable
                style="width: 100%"
                :options="positionCodesList"
                :props="cascaderProps"
                placeholder="请选择巡检区域"
                @change="changeCheckArea"
              />
            </px-form-item> </px-col
          ><px-col :span="5">
            <px-form-item prop="lockTime" label="日期锁定">
              <px-date-picker v-model="queryParams.lockTime" type="date" placeholder="请选择日期" />
            </px-form-item>
          </px-col>
          <px-col :span="4">
            <px-button type="primary" @click="queryTable">查询</px-button>
            <px-button @click="resetTable">重置</px-button>
          </px-col>
        </px-row>
      </px-form>
      <!-- 表格功能 -->
      <px-table :data="tableData" class="equip-table" size="small" height="calc(100vh - 280px)" border>
        <template v-for="(item, index) in tableColumns" :key="index">
          <px-table-column
            :label="item.label"
            :min-width="item.minWidth"
            :align="item.align"
            :prop="item.prop"
            :show-overflow-tooltip="item.showOverflowTooltip"
            :fixed="item.fixed"
          />
        </template>

        <px-table-column fixed="right" label="操作" min-width="60" align="center">
          <template #default="scope">
            <!-- 详情 -->
            <px-tooltip content="详情" placement="top">
              <px-button v-has="'ALL_EQUIP_INSPECT_RECORDING_LIST'" link type="primary" icon="Tickets" @click="handleView(scope.row)" />
            </px-tooltip>
          </template>
        </px-table-column>
      </px-table>
      <!-- <pagination
        v-show="total > 0"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        class="inspection-pagination"
        :total="total"
        @pagination="queryTable"
      /> -->
    </div>
  </div>
</template>
<style lang="scss" scoped>
@import url("../scss/table-list.scss");
@import url("@/views/all/equip/scss/table-list.scss");
</style>
